<template>
	<Layout :class="'bg-white p-2'">
		<Row class="p-1">
			<Col class="p-1" span="4">
			<Input class="w-100" v-model="searchKey.warehouseName" placeholder="请输入仓库名称" />
			</Col>
			<Col class="p-1" span="4">
			    <Select placeholder=" 请选择仓库状态" v-model="searchKey.state" clearable>
			     <Option v-for="item in statuList" :value="item.value" :key="item.value">{{ item.label }}</Option>
			    </Select>
			</Col>
			<Col class="p-1" span="4">
			<Input class="w-100" v-model="searchKey.address" placeholder="请输入地址" />
			</Col>
			<Col class="p-1" span="4">
			<Input class="w-100" v-model="searchKey.userName" placeholder="请输入管理员姓名" />
			</Col>			
		</Row>
		<Row>
			<Button class="m-1 float-left" type="error" @click="newUser" >新增</Button>
			<Button class="m-1 float-right" type="primary" @click="searchs" icon="ios-search" >查询</Button>
		</Row>
		<Layout :class="'bg-white'">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.warehouseId)">详细</Button>
					<Button type="error" size="small" @click="remove(row.warehouseId)">删除</Button>
				</template>
			</Table>
			<Page :class="'m-2 text-right'" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</Layout>
	</Layout>
</template>
<script>
	export default {
		data() {
			return {
				searchKey : {
					warehouseId : "", // 仓库编号
					warehouseName : "", // 仓库名称
					state : "",	// 仓库状态
					userId : "", // 员工编号
					address : "", // 仓库地址
					userName : "", // 管理员姓名
					storeId : "1", // 门店id
					current:"",
					size:""
				},
				statuList: [{
						value : "0",
						label : '禁用'
					},
					{
						value : "1",
						label : '启用'
					},
				],
				tableInfo: {
					currentPage: 1,
					total: 0,
					columnInfo: [{
							title: "仓库名称",
							key: "warehouseName",
							align: 'center',
							width:300
						},
						{
							title: "仓库地址",
							key: "address",
							align: 'center',
							width:300
						},
						{
						   title: "仓库状态",
						   key: "state",
						   align: 'center',
						   render: (h, params) => {
							return h('div', this.statuTransform(params.row.state))
						   }
						},
						{
							title: "管理者姓名",
							key: "userName",
							align: 'center',
							width:200
						},
						{
							title: "操作",
							align: 'center',
							slot: 'action'
						}
					],
					data: []
				}
			}
		},
		methods: {
			init: function() {
				this.tableInfo.currentPage = 0;
				this.search();
			},
			newUser: function() {
				this.$router.push({
					name: "warehouse_new"
				});
			},
			show: function(warehouseId) {
				this.$router.push({
					name: "warehouse_detail",
					params: {
						warehouseId
					}
				});
			},
			remove: function(warehouseId) {

				this.message.confirm({
					title: "删除提示",
					content: "即将删除用户，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/warehouse/info",
							param: {
								warehouseId
							}
							
						}).then(data => {
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			searchs: function() {
				// this.searchKey.current = 1;
				this.search();
			},
			search: function() {
				this.http.get({
					url: "/warehouse/page",
					param: this.searchKey
				}).then(data => {
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
					this.tableInfo.data = data.records;
				});
			},
			pageSearch: function(changedPage) {
				this.searchKey.current = changedPage;
				this.search();
			},
			statuTransform: function(statuCode) {
			var res;
			if (statuCode === true) {
			 res = "启用";
			} else if (statuCode === false) {
			 res = "禁用";
			}
			return res;
		   },
		},
		created: function() {
			this.init();
			this.searchKey.storeId = this.$route.query.storeId;
		}
	}
</script>

<style>
	
</style>